<template>
    <div class="sea-main-box">

        <!-- top-horizontal-toolbar -->
        <ul class="sea-menu--horizontal" style="background-color: #545c64;">
            <li class="sea-menu-item" @click="switchNavigation" :style="{width: expendNavigation? '64px': '200px'}">
                <strong>Sea</strong>
                <transition name="fade">
                    <span v-show="!expendNavigation">Admin</span>
                </transition>
            </li>

            <li class="sea-menu-item" @click="homePage()">
                <i class="fa fa-fw fa-home"></i>主页
            </li>

            <user-header></user-header>

            <!-- 这个导航容易误触，不要和复杂的组件放一起 -->
            <li class="sea-menu-item pull-right" title="点击展开菜单栏">
                <sea-searchbar></sea-searchbar>
            </li>
        </ul>

        <!-- center-panel  -->
        <div style="height: calc(100% - 60px)">
            <el-container style="height: 100%">
                <!-- left-navigation -->
                <el-aside width="null" class="sea-menu-navigation">
                    <el-menu text-color="#fff" class="sea-menu-vertical" popper-class="el-popper"
                             background-color="#545c64" active-text-color="#ffd04b"
                             :collapse="expendNavigation" :popper-options="popper_options"
                             @select="handleOpen">

                        <template v-for="(item) in menus">

                            <!-- level1 -->
                            <el-menu-item v-if="!!item.src" :index="item.name"  :popper-options="popper_options">
                                <el-icon>
                                    <i :class="'el-icon ' + item.icon"></i>
                                </el-icon>
                                <template #title>
                                    <span>{{ item.title }}</span>
                                </template>
                            </el-menu-item>

                            <!-- level2 -->
                            <el-sub-menu v-else :index="item.name">
                                <template #title>
                                    <el-icon><i :class="'el-icon ' + item.icon"></i></el-icon>
                                    <span>{{ item.title }}</span>
                                </template>

                                <template v-for="(ele) in item.children">
                                    <el-menu-item v-if="!!ele.src" :index="ele.name">
                                        <i :class="ele.icon"></i>
                                        <template #title>
                                            <span>{{ ele.title }}</span>
                                        </template>
                                    </el-menu-item>
                                </template>
                            </el-sub-menu>

                        </template>

                    </el-menu>
                </el-aside>

                <!-- center-router-view -->
                <el-main style="overflow-y: scroll;padding: 0" class="scroll">
                    <div style="height: calc(100% - 20px); width: 100%;">
                        <router-view v-slot="{ Component }">
                            <transition>
                                <keep-alive>
                                    <component :is="Component"/>
                                </keep-alive>
                            </transition>
                        </router-view>
                    </div>
                </el-main>
            </el-container>
        </div>

    </div>
</template>

<script setup>
import {ref} from 'vue';
import router from "@/router/index";
import MenuManager from "@/starter/menu-manager.js";
import UserHeader from "@/view/main/user-header.vue";

const popper_options = ref({
    modifiers: [
        {
            name: 'computeStyles',
            options: {gpuAcceleration: false, adaptive: false}
        }
    ]
});

// 是否展开侧滑导航
const expendNavigation = ref(true);


// 是否展开搜索栏
const expendSearchbar = ref(true);

// 菜单栏列表
const menus = ref([]);

MenuManager.getExamples().then(list => {
    menus.value = list;
    console.log(menus.value);
})

/**
 * 开关侧滑导航
 */
const switchNavigation = () => {
    expendNavigation.value = !expendNavigation.value;
}

/**
 * 开关侧滑导航
 */
const switchSearchbar = () => {
    expendSearchbar.value = !expendSearchbar.value;
}

/**
 * 菜单路由前缀
 *
 * @type {string}
 */
const suffix = '/sample/';

/**
 * 点击菜单
 *
 * @param {string} key
 * @param {Array<string>} raw
 */
const handleOpen = (key, raw) => {
    console.log(raw);
    if (!key.startsWith('ignore')) {
        const target = suffix + raw.join('/');
        router.push({path: target});
    }
    return true;
}

/**
 * 打开主页
 */
const homePage = () => {
    router.push({path: "/"});
}

// album start -------------------------------------------------------------------------------

</script>

<style scoped lang="scss">
@use "../index.scss";

/**idea 下代码有警告，实际有用*/
.el-menu--horizontal > .el-menu-item:nth-child(1) {
    margin-right: auto;
}

.fade-enter-active {
    transition: opacity 0.5s;
}

.fade-enter-active {
    transition: opacity 0.1s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

/* 外层是 Popper 容器（无过渡） */
.el-popper {
    padding: 0 !important;
    transition: opacity 0.3s ease;
}

/* 内层元素添加过渡 */
.el-popper .inner-content {
    transition: all 0.3s ease;
    padding: 8px;
}

</style>
